<template>
	<view id="pay">
		<!-- 个人信息 -->
		<view class="personal-info" @click="selectAddress">
			<view class="personal-left">
				<block v-if="address.id!=undefined">
					<view class="per-address">{{address.pro}}{{address.city}}{{address.area}}{{address.address}}</view>
					<view class="per-name">{{address.name}} {{address.phone}}</view>
				</block>
				<block v-else>
					<view class="per-address" style="margin-bottom: 0;">请选择地址</view>
				</block>
			</view>
			<icon class="icon-right"></icon>
		</view>
		<!-- 送达时间 -->
		<view class="time-service" v-if="expect_time_qr==1">
			<text class="time-title">送达时间</text>
			<view class="time-right">
				<text class="time-content" @click="bindTime">{{expect_time ? expect_time : '选择送达时间'}}</text>
				<icon class="icon-right"></icon>
			</view>
		</view>
		<!-- 订单商品列表 -->
		<view class="pay-list">
			<view class="pay-item" v-for="(item,i) in goods_arr" :key="item.goods_id">
				<view class="pay-img">
					<image :src="IMG_URL+item.goods_img" mode="aspectFit"></image>
				</view>
				<view class="pay-right">
					<view class="p-r-content">{{item.goods_name}}</view>
					<view class="p-r-num">规格：{{item.sku.sku_name}}</view>
					<view class="p-r-num">数量：×{{item.goods_num}}</view>
					<block v-if="item.if_vip == 1">
						<view class="p-r-price" style="color: #999999;font-size: 28rpx;text-decoration:line-through"><text>¥</text>{{item.goods_price}}</view>
						<view class="p-r-price"><text>¥</text>{{item.sku_vprice}}</view>
					</block>
					<block v-else>
						<view class="p-r-price"><text>¥</text>{{item.goods_price}}</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-msg">
			<view class="o-meg-item">
				<text>商品金额</text>
				<text>¥{{price}}</text>
			</view>
			<view class="o-meg-item">
				<text>运费</text>
				<text>¥{{shipping_fee}}</text>
			</view>
		</view>
		<view style="height: 200rpx; background: #F5F5F5;"></view>
		<!-- 提交按钮 -->
		<view class="g-bottom">
			<view class="totalPrice"><text>¥</text>{{ accAdd(Number(this.price), Number(this.shipping_fee)) }}</view>
			<button class="submit-btn" @tap="submitOrder">提交订单</button>
		</view>
		<!-- 日期选择弹出框 -->
		<lh-small-time :status='status' @bindDeFind="bindDeFind"></lh-small-time>
	</view>
</template>

<script>
	import { accMul, accAdd, Subtr } from '../../util/precision.js'
	const app = getApp();
	import {
		mkorder,
		defaultAddress,
		shippingFee,
		wxpay
	} from '@/api/index.js'
	import {
		lhSmallTime
	} from '@/wxcomponents/lh-small-time/lh-small-time.vue'
	export default {
		components: {
			lhSmallTime
		},
		data() {
			return {
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				pages: 'pages', //页面栈
				address: {}, //地址信息
				payList: [1, 2, 3],
				openid: "",
				price: "",
				expect_time: "",
				goods_arr: [],
				status: false,
				shipping_fee: 0, //运费
				expect_time_qr: 1, //是否显示送达时间
				throttle: true, //防止重复点击
			}
		},
		methods: {
			accAdd,
			// 时间选择
			bindTime: function() {
				this.status = !this.status
				// this.$refs.popup.open()
			},

			// 获取时间
			bindDeFind: function(e) {
				this.expect_time = e
				// console.log(e)
			},

			// 选择地址
			selectAddress: function() {
				uni.navigateTo({
					url: '/pageA/address/address'
				})
			},

			// 获取默认地址
			defaultAddress: function() {
				defaultAddress({
					openid: this.openid
				}).then(res => {
					this.address = res;
					app.globalData.address = res
					this.shippingFee(); //获取运费
				})
			},

			// 获取运费
			shippingFee: function() {
				let goods_id = [];
				let goods_weight = [];
				let sku_id=[];
				for (let i in this.goods_arr) {
					// goods_arr.push({});
					goods_id[i] = this.goods_arr[i].goods_id;
					goods_weight[i] = this.goods_arr[i].goods_num;
					sku_id[i]=this.goods_arr[i].sku.id
				}
				shippingFee({
					address_id: this.address.id,
					goods_id:goods_id.join(','),
					goods_num:goods_weight.join(','),
					sku_id:sku_id.join(',')
					// goods_info: goods_arr
				}).then(res => {
					this.shipping_fee = res.shipping_fee
					this.expect_time_qr = res.expect_time
				})
			},

			// 提交订单
			submitOrder: function() {
				// 防止重复点击
				if (!this.throttle) {
					return false
				}
				this.throttle = false;
				// 验证
				if (this.expect_time == "" && this.expect_time_qr == 1) {
					uni.showToast({
						title: '请选择送达时间!',
						duration: 1000,
						icon: 'none'
					})
					return false;
				}
				if (this.address.city == "" || this.address.city == undefined) {
					uni.showToast({
						title: '请选择地址',
						duration: 1000,
						icon: 'none'
					})
					return false;
				}
				let goods_arr = [];
				for (let i in this.goods_arr) {
					goods_arr.push({});
					goods_arr[i]['goods_id'] = this.goods_arr[i].goods_id;
					goods_arr[i]['goods_price'] = this.goods_arr[i].goods_price;
					goods_arr[i]['goods_num'] = this.goods_arr[i].goods_num;
					goods_arr[i]['sku_id'] = this.goods_arr[i].sku.id;
				}
				mkorder({
					openid: this.openid,
					payment_id: 1,
					price: this.price,
					pro: this.address.pro,
					city: this.address.city,
					area: this.address.area,
					address: this.address.address,
					expect_time: this.expect_time,
					goods_arr: goods_arr,
					shipping_fee:this.shipping_fee,
					name:this.address.name,
					phone:this.address.phone
				}).then(res => {
					console.log(res)
					wxpay({
						openid: this.openid,
						attach: "nabercat_order",
						body: 'bodyattachattachattach',
						order_num: res,

					}).then(resi => {
						if (typeof resi == 'string') {
							resi = JSON.parse(resi.trim())
						}
						uni.requestPayment({
							timeStamp: resi.timeStamp,
							nonceStr: resi.nonceStr,
							package: resi.package,
							signType: resi.signType,
							paySign: resi.paySign,
							success: () => {
								this.throttle = true;
								uni.showToast({
									title: '支付成功',
									duration: 1500,
									success: () => {
										uni.redirectTo({
											url: '/pageA/order/order'
										})
									}
								});
							},
							fail: (err) => {
								this.throttle = true;
								console.log(err)
							}
						})
					})
				})
			},
		},
		onLoad() {
			this.price = app.globalData.buyGoodsMsg.price;
			this.goods_arr = app.globalData.buyGoodsMsg.goods_arr;
			this.openid = uni.getStorageSync('openid');
			this.defaultAddress(); //获取默认地址
		},
		onShow() {
			this.address = app.globalData.address;
			this.shippingFee(); //获取运费
		}
	}
</script>

<style scoped lang="scss">
	#pay {
		width: 100%;
		height: 100%;
		margin-bottom: 138rpx;
		background: #F5F5F5;

		.personal-info {
			margin: 20rpx 0;
			width: 100%;
			height: 158rpx;
			border-radius: 16rpx 16rpx 0 0;
			background: #FFFFFF;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.personal-left {
				color: #333333;
				flex: 1;

				.per-address {
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
				}

				.per-name {
					font-size: 28rpx;
				}
			}
		}

		.time-service {
			height: 112rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			border-radius: 16rpx 16rpx 0 0;

			&::before {
				content: "";
				height: 2rpx;
				position: absolute;
				background: #EFEFEF;
				bottom: 0;
				left: 32rpx;
				right: 32rpx;
			}

			.time-title {
				color: #333333;
				font-weight: 600;
			}

			.time-right {
				color: #FFC102;
				float: right;
				display: flex;
				align-items: center;
			}
		}

		.pay-list {
			.pay-item {
				padding: 28rpx 32rpx 36rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				&:nth-of-type(1) {
					border-radius: 0 0 16rpx 16rpx;
				}

				.pay-img {
					height: 188rpx;
					width: 188rpx;
					margin-right: 32rpx;

					&>image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}

				.pay-right {
					flex: 1;
					padding-top: 4rpx;

					.p-r-content {
						color: #333333;
						font-size: 32rpx;
						margin-bottom: 8rpx;
						font-weight: 600;
					}

					.p-r-num {
						color: #666666;
						font-size: 24rpx;
						margin-bottom: 8rpx;
					}

					.p-r-price {
						color: #F6240C;
						font-size: 42rpx;

						&>text {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.order-msg {
			padding: 36rpx 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 40rpx;

			.o-meg-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 52rpx;

				&>text:nth-of-type(1) {
					color: #666666;
					font-size: 30rpx;
					font-weight: 400;
				}

				&>text:nth-of-type(2) {
					color: #333333;
					font-size: 28rpx;
					font-weight: 500;
				}

				&:nth-last-child(1) {
					margin-bottom: 0;
				}
			}
		}
	}

	.icon-right {
		width: 18rpx;
		height: 30rpx;
		background: url(../../static/images/pay-right.png) no-repeat;
		background-size: cover;
	}

	.g-bottom {
		padding: 0 36rpx;
		box-sizing: border-box;
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;

		.totalPrice {
			color: #F6240C;
			font-size: 58rpx;
			font-weight: 500;

			&>text {
				font-size: 36rpx;
			}
		}

		.submit-btn {
			width: 236rpx;
			height: 78rpx;
			background: #FFC102;
			border-radius: 40rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 78rpx;
		}
	}
</style>
